<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery.js"></script>
	<link rel="stylesheet" href="css/cypager.min.css" />
	<link rel="stylesheet" href="css/myPagination1.css" type="text/css">
	<link rel="stylesheet" href="css/index.css">
	<style>
		#pagination{
			background: #E5E5E5;
			padding-left: 23vw;
			padding-bottom: 10vw;
		}
		.pagination li.active {
			background: #cc666c;
			color: white;
			cursor: not-allowed;
		}
		.pagination ul li {
			padding: 0 1vw;
			vertical-align: top;
			display: inline-block;
			font-size: 1vw;
			min-width: 4vw;
			min-height: 2vw;
			line-height: 5vw;
			cursor: pointer;
			box-sizing: border-box;
			text-align: center;
			background-color: #ffffff;
			color: #606266;
			border-radius: 1vw;
			margin: 0 1px;
			border: 1px solid #ebebeb;
			height: 5vw;
			width: 8vw;
			white-space:nowrap;
		}
	</style>
</head>
<body>
<div class="header">
	<img src="img/bg1.jpg" />
	<div>
		<div class="rank"><a href="/index">投票专区</a></div>
		<div class="vote"><a href="second">最热排行</a></div>
	</div>
</div>
<div class="main" id="content">
</div>
<div id="pagination" class="pagination"></div>
<div class="am-cf">
	<div class="am-fr">
		<ul id="page" class="am-pagination tpl-pagination">
		</ul>
	</div>
</div>

<div class="bottom">
	<p>活动详情</p>
	<p>投票规则：活动采用匿名投票方式，每人限投一票。</p>
	<p>奖项设置：</p>
	<p>第一名：xxx*1<br>第二名：xxx<br>第三名：xxx<br>幸运奖：xxx</p>
	<p>投票时间：2019.7.25-7.30</p>
</div>
<div id="win">
	<div>
		<p>活动期间每人只能投一次票！</p>
		<p>请慎重选择！</p>
		<form>
			画吧ID:<br> <input type="text" name="username" class="input1"><br>
			邮箱: <br><input type="text" name="email" class="input1" id="txt1"><br>
			验证码：<br>
			<div style="display: flex;"><input type="code" name="key" class="input2"><button id="btn">获取验证码</button></div>
			<input type="button" value=" 就投她了" class="input3" onclick="voteHer()">
			<div id="input4" style="text-align: center" onclick="closeWin()">我再想想</div>

		</form>
	</div>
</div>
<div id="ok" class="alert">
	<p>投票成功！</p>
	<div onclick="closeOk()">
		<p>确定 </p>
	</div>
</div>

<div id="full" class="alert">
	<p>请勿重复投票</p>
	<div onclick="closeFull()">
		<p>确定 </p>
	</div>
</div>
<div id="no" class="alert">
	<p>投票失败</p>
	<div onclick="closeNo()">
		<p>确定 </p>
	</div>
</div>
<script type="text/javascript" src="js/cypager.min.js"></script>
<script>
    var win = document.getElementById("win");
    var ok = document.getElementById("ok");
    var no = document.getElementById("no");
    var full = document.getElementById("full");

    $(function() {
        $("#pagerArea").cypager({
            pg_size: 10,
            pg_nav_count: 4,
            pg_total_count: 194,
            pg_call_fun: function(count) {
                alert(count)
            }
        });
    });

</script>
<script>
    var okk = 0;
    var email = 0;

    function voteHer() {
        if (okk == 1) {
            ok.style.display = "inline";
        } else if (email == 1) {
            full.style.display = "inline";
        } else {
            no.style.display = "inline";
        }
    }

    function closeWin() {
        win.style.display = "none";
    }

    function closeFull() {
        full.style.display = "none";
        win.style.display = "none";
    }

    function closeOk() {
        ok.style.display = "none";
        win.style.display = "none";
    }

    function closeNo() {
        no.style.display = "none";
        win.style.display = "none";
    }

    //倒计时60s
    var wait=60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.innerHTML="获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.innerHTML="重发(" + wait + ")";
            wait--;
            setTimeout(function() {
                    time(o)
                },
                1000)
        }
    }
    document.getElementById("btn").onclick=function(){
        var oTxt=document.getElementById("txt1");
        var re=/^\w+@[a-z0-9]+\.[a-z]+$/i;/*邮箱不区分大小写*/
        if (re.test(oTxt.value))
        {
            time(this);
        }
        else
        {
            alert("输入的邮箱有误，请重新输入");
        }
    }

</script>

<script src="js/myPagination1.js"></script>
<script type="text/javascript">
    function Show(id) {
        console.log(id)
        win.style.display ="inline";
    }
    $(document).ready(function(){
        var curr = 0;
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/pictureInformation"+curr,
            success : function(data){

                var str = '';
                for (var i = 0; i < data.length; i++) {
                    str+="<div class='paint'>"+
                        "<img src='img/"+data[i].pictureurl+" '>"+
                        "<div class='num'>"+
                        "<p>❤"+data[i].votenumber+"票</p>"+
                        "</div>"+
                        "<div class='span' onclick='Show(id)'>"+
                        "<a>投票</a> </div> </div>"
                }
                //把数据插入到ul中
                $("#content").html(str);
            }
        });
        $.ajax({
            url : "/pictureCount",
            type : "post",
            dataType : "json",
            success : function(data){
                var ListNum=data;
                var pageNum=Math.ceil(ListNum/6);
                //调用分页
                new Page({
                    id: 'pagination',
                    pageTotal: pageNum, //总页数
                    pageAmount: 10, //每页多少条
                    dataTotal: ListNum, //总共多少条数据
                    curPage:1, //初始页码,不填默认为1
                    pageSize: 3, //分页个数,不填默认为5
                    showPageTotalFlag: false, //是否显示数据统计,不填默认不显示
                    showSkipInputFlag: false, //是否支持跳转,不填默认不显示
                    getPage: function(page) {
                        //获取当前页数
                        console.log(page);
                        var Pagecurr = page-1;
                        $.ajax({
                            type:"POST",
                            dataType:"json",
                            url:"/pictureInformation"+Pagecurr,
                            success : function(data){
                                var str = '';
                                for (var i = 0; i < data.length; i++) {
                                    str+="<div class='paint'>"+
                                        "<img src='img/"+data[i].pictureurl+" '>"+
                                        "<div class='num'>"+
                                        "<p>❤"+data[i].votenumber+"票</p>"+
                                        "</div>"+
                                        "<div class='span' onclick='alert(1)'>"+
                                        "<a>投票</a> </div> </div>"
                                }
                                //把数据插入到ul中
                                $("#content").html(str);

                            }

                        });


                    }


                });
            }
        });


    });

    document.getElementById("input4").onclick=function(){
        win.style.display ="none";
    }

</script>

</body>
</html>
